<template>
  <svg v-if="visible" class="connection-preview" :style="connectionPreviewStyle">
    <path :d="connectionPath" stroke="#666" stroke-width="2" fill="none"/>
  </svg>
</template>

<script setup>
import { computed, inject, ref } from 'vue';

// Props
const props = defineProps({
  visible: {
    type: Boolean,
    default: false
  },
  startX: {
    type: Number,
    default: 0
  },
  startY: {
    type: Number,
    default: 0
  },
  endX: {
    type: Number,
    default: 0
  },
  endY: {
    type: Number,
    default: 0
  }
});

// Injected values
const scale = inject('scale', ref(1));
const translateX = inject('translateX', ref(0));
const translateY = inject('translateY', ref(0));

// Computed properties
const connectionPreviewStyle = computed(() => ({
  position: 'fixed',
  left: '0',
  top: '0',
  width: '100%',
  height: '100%',
  pointerEvents: 'none',
  zIndex: 10000 // 设置一个非常高的z-index值，确保连线预览始终显示在所有节点之上
}));

const connectionPath = computed(() => {
  // 获取当前画布的缩放和平移值
  const currentScale = scale.value;
  const currentTranslateX = translateX.value;
  const currentTranslateY = translateY.value;
  
  // 计算在画布变换下的实际坐标
  const adjustedStartX = props.startX * currentScale + currentTranslateX;
  const adjustedStartY = props.startY * currentScale + currentTranslateY;
  const adjustedEndX = props.endX * currentScale + currentTranslateX;
  const adjustedEndY = props.endY * currentScale + currentTranslateY;
  
  // 计算贝塞尔曲线控制点
  const dx = adjustedEndX - adjustedStartX;
  const dy = adjustedEndY - adjustedStartY;
  
  // 计算连线方向的单位向量
  const distance = Math.sqrt(dx * dx + dy * dy);
  const directionX = distance > 0 ? dx / distance : 1;
  const directionY = distance > 0 ? dy / distance : 0;
  
  // 设置从端点外部开始的偏移距离（以像素为单位）
  const offsetDistance = 10 * currentScale; // 偏移距离随缩放比例变化
  
  // 计算偏移后的起始点坐标
  // 添加固定的水平偏移量(20px)，使连线从输出端点右侧开始
  const horizontalOffset = 20 * currentScale; // 水平偏移量随缩放比例变化
  const offsetStartX = adjustedStartX + horizontalOffset; // 固定向右偏移
  const offsetStartY = adjustedStartY; // 垂直方向保持不变，保持在输出端点的中心
  
  // 重新计算贝塞尔曲线控制点
  const bezierX = Math.abs(adjustedEndX - offsetStartX) * 0.5;
  
  // 根据连接类型调整控制点
  let controlPoint1X, controlPoint1Y, controlPoint2X, controlPoint2Y;
  
  // 水平连接
  if (Math.abs(adjustedEndY - offsetStartY) < 10) {
    // 水平连接时，控制点保持在同一水平线上
    controlPoint1X = offsetStartX + bezierX;
    controlPoint1Y = offsetStartY;
    controlPoint2X = adjustedEndX - bezierX;
    controlPoint2Y = offsetStartY;
  } 
  // 垂直连接
  else if (Math.abs(adjustedEndX - offsetStartX) < 10) {
    // 垂直连接时，控制点在垂直方向上分布
    controlPoint1X = offsetStartX;
    controlPoint1Y = offsetStartY + bezierX;
    controlPoint2X = adjustedEndX;
    controlPoint2Y = adjustedEndY - bezierX;
  } 
  // 对角线连接
  else {
    // 对角线连接时，控制点形成平滑曲线
    controlPoint1X = offsetStartX + bezierX;
    controlPoint1Y = offsetStartY;
    controlPoint2X = adjustedEndX - bezierX;
    controlPoint2Y = adjustedEndY;
  }
  
  // 返回SVG路径
  return `M ${offsetStartX} ${offsetStartY} 
          C ${controlPoint1X} ${controlPoint1Y},
            ${controlPoint2X} ${controlPoint2Y},
            ${adjustedEndX} ${adjustedEndY}`;
});
</script>

<style>
.connection-preview {
  pointer-events: none;
}
</style>